<template>
	<view class="content">
		<!-- 顶部 -->
		<view class="header">
			<view class="search" v-if="headerShowStatus">
				<view class="" style="margin-right: 10px;width: 40%;">
					<picker mode="selector" @change="bindPickerChange" :value="pickerValue" :range="outfitList" range-key="name">
						<u--input
							placeholder="请选择"
							placeholderStyle="color:#fff"
							suffixIcon="arrow-down-fill"
							suffixIconStyle="color: #fff"
							shape="circle"
							disabled
							fontSize="13"
							disabledColor="#ffd102"
							v-model="outfit"
						></u--input>
					</picker>
				</view>
				<u-search :show-action="true" @custom="search" v-model.trim="searchVal" placeholderColor="#fffdef" actionText="搜索" bgColor="#ffd102" borderColor="#fff" :animation="true"></u-search>
			</view>
			<view class="search" v-if="headerShowStatus">
				<view class="" style="margin-right: 10px;width: 50%;" @click="areaShow = true">
						<u--input
							placeholder="请选择区域"
							placeholderStyle="color:#fff"
							suffixIcon="arrow-down-fill"
							suffixIconStyle="color: #fff"
							shape="circle"
							disabled
							disabledColor="#ffd102"
							fontSize="13"
							v-model="areaValues"
						></u--input>
				</view>
				<view class="" style="width:50%;" @click="outfitShow = true">
					<u--input
						placeholder="请选择机构类型"
						placeholderStyle="color:#fff"
						suffixIcon="arrow-down-fill"
						suffixIconStyle="color: #fff"
						shape="circle"
						disabled
						fontSize="13"
						disabledColor="#ffd102"
						v-model="outfitValues"
					></u--input>
				</view>
			</view>
			<view class="search" v-if="!headerShowStatus" @click="headerShowFun">
				<u-icon name="arrow-down" size="20"></u-icon>
			</view>
			<view class="search" v-if="headerShowStatus" @click="headerShowFun">
				<u-icon name="arrow-up"  size="20"></u-icon>
			</view>
		</view> 
		<!-- /顶部 -->
		
		<!-- 地图 -->
		<view class="">
			<map id="123" class="map" :latitude="latitude" :longitude="longitude" show-location="true" :markers="markers" @markertap="markertap" @labeltap="markertap">
			</map>
		</view>
		<!-- /地图 -->
		
		
		<!-- 区域选择组件 -->
		<u-picker :show="areaShow" ref="uPickers" :columns="areaColumns" @cancel="areaCancel" @confirm="areaConfirm" @change="areaChangeHandler"></u-picker>
		<!-- /区域选择组件 -->  
		
		<!-- 机构类型选择组件 -->
		<u-picker :show="outfitShow" ref="uPicker" :columns="outfitColumns" @cancel="outfitCancel" @confirm="outfitConfirm" @change="outfitChangeHandler"></u-picker>
		<!-- /机构类型选择组件 -->
		
		<!-- 底部弹出层 -->
		<u-popup :overlay="false" closeable :show="popupShow" @close="popupClose" @open="popupOpen">
			<view class="popup_content">
				<text>搜索结果展示</text>
				<view class="list">
					<scroll-view scroll-y="true" style="height: 600rpx;">
						<view :class="[tapClick == index ? 'active_bac':'']" class="list_item" @click="itemClick(index)" v-for="(item,index) in 10">
							<view :class="[tapClick == index ? 'active':'']" class="list_item_left">{{index + 1}}</view>
							<view class="list_item_right">
								<text style="color: #0062cc;">机构名称：广州市从化区鳌头镇中心卫生院</text>
								<text>地址：广州市从化区鳌头镇康卫路25号</text>
								<text>咨询电话: 020-87875403</text>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
		<!-- /底部弹出层 -->
	</view>
</template>

<script>
	// 引入SDK核心类，js文件根据自己业务，位置可自行放置
	var QQMapWX = require('@/assets/js/qqmap-wx-jssdk.js');
	var qqmapsdk;
	export default {
		data() {
			return {
				headerShowStatus:true,//顶部的显示隐藏
				
				outfitList:[
					{
						id:1,
						name:'机构查询'
					},
					{
						id:2,
						name:'地址查询'
					},
				],
				pickerValue:0,//这个展示选中的哪一项，
				outfit:'',//机构查询
				outfitValue:'',//机构查询值
				
				searchVal:'',//搜索内容
				
				//区域列表数据
				areaShow: false,
				areaColumns: [    				
					['区域'],
					['中国', '美国'],
					['深圳', '厦门', '上海', '拉萨']
				],
				areaColumnData: [
					['深圳', '厦门', '上海', '拉萨'],
					['得州', '华盛顿', '纽约', '阿拉斯加'],
				],
				areaValues:'',//区域信息
				
				//机构类型列表数据
				outfitShow: false,
				outfitColumns: [    				
					['机构类型'],
					['全部', '医疗服务机构'],
					['全部', '三级综合医院', '级综合医院', '护理院']
				],
				outfitColumnData: [
					['全部', '三级综合医院', '级综合医院', '护理院'],
					['区级居家养老服务平台', '街道级社区居家养老服务中心'],
				],
				outfitValues:'',//机构类型
				
				id:11, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 23.154477,
				longitude: 113.265105,
				iconPath: 'https://shop.lcxev.com/web/statics/cdzimages/cdgy.png',
				markersList: [
					{
						id:2,
						latitude: 23.154107,
						longitude: 113.261296,
						iconPath: 'https://shop.lcxev.com/web/statics/cdzimages/cdgy.png',
						name:'广东省高级福利中心1',
						address:'广东路120号',
						phoneNum:'17356526765',
					}, 
					{
						id:3,
						latitude: 23.15645,
						longitude: 113.26541,
						iconPath: 'https://shop.lcxev.com/web/statics/cdzimages/cdgy.png',
						name:'广东省高级福利中心2',
						address:'广东路121号',
						phoneNum:'17356526700'
					},
					{
						id:4,
						latitude: 23.155769,
						longitude: 113.249744,
						iconPath: 'https://shop.lcxev.com/web/statics/cdzimages/cdgy.png',
						name:'广东省高级福利中心3',
						address:'广东路122号',
						phoneNum:'17356526799'
					},
				],
				markers:[],
				
				popupShow:false,//底部弹出层状态
				tapClick:'',//选中的默认项
				
			}
		},
		onLoad: function () {
			// 实例化API核心类
			qqmapsdk = new QQMapWX({
				key: 'DSIBZ-EOKKU-LKDVT-43RXT-GHVCJ-UZBVG'
			});
		},
		onShow: function () {
			uni.createMapContext('123',this);
			// 调用接口
			qqmapsdk.search({
				keyword: '酒店',
				success: function (res) {
					console.log(res);
				},
				fail: function (res) {
					console.log(res);
				},
				complete: function (res) {
					console.log(res);
				}
			});
			this.points();
		},
		methods: {
			//显示隐藏顶部区域
			headerShowFun(){
				this.headerShowStatus = !this.headerShowStatus;
			},
			// 机构查询
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.outfitValue = this.outfitList[e.target.value].id;
				this.outfit = this.outfitList[e.target.value].name;
				this.popupShow = true;
			},
			
			//搜索事件
			search(){
				console.log('搜索事件',this.searchVal);
			},
			
			
			//区域弹框区域选择事件
			areaChangeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					pickers = this.$refs.uPickers
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 1) {
					// picker为选择器this实例，变化第二列对应的选项
					pickers.setColumnValues(2, this.areaColumnData[index]);
				}
			},
			//确认区域选择弹框
			// 回调参数为包含columnIndex、value、values
			areaConfirm(e) {
				console.log('confirm', e)
				this.areaShow = false;
				this.areaValues = e.value[0]+'-'+e.value[1]+'-'+e.value[2];
				this.popupShow = true;
			},
			//取消区域选择弹框
			areaCancel(){
				this.areaShow = false
			},
			
			//机构类型弹框机构类型选择事件
			outfitChangeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 1) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(2, this.outfitColumnData[index]);
				};
			},
			//确认机构类型选择弹框
			// 回调参数为包含columnIndex、value、values
			outfitConfirm(e) {
				console.log('confirm', e)
				this.outfitShow = false;
				this.outfitValues = e.value[0]+'-'+e.value[1]+'-'+e.value[2];
				this.popupShow = true;
			},
			//取消机构类型选择弹框
			outfitCancel(){
				this.outfitShow = false
			},
			
			//点击地图标记点事件
			markertap(e){
				console.log('e',e)
				console.log('地图标记点');
			},
			points(){
				let newmarker =[];
				var id=1;
				this.markersList.forEach(item=>{
					let marker = { 
						id:item.id,
						latitude: item.latitude,
						longitude: item.longitude,
						iconPath:item.iconPath,
						value:item.name,
						width: 30,
						height: 30,
						callout : {
							content: item.name, //文本
							content:"机构名称：" + item.name + "\n地址：" + item.address+ "\n咨询电话：" + item.phoneNum,
							color: '#000', //文本颜色
							borderRadius: 5, //边框圆角
							borderWidth: 2, //边框宽度
							bgColor: '#fff', //背景色
							display:'BYCLICK',
							padding: 10, //文本边缘留白,
							textAlign: 'center', //文本对齐方式。有效值: left, right, center,
							fontSize:12,
						}
					}
					newmarker.push(marker)
				})
				this.markers = newmarker;
				
				// uni.request({
				// 	url: 'http://xxxx:xxxx/xxx/xxx/xxx',
				// 	method: 'GET',
				// 	success: (res) => {
				// 		res.data.datas.forEach(item=>{
				// 			let marker = { 
				// 				id:id++,
				// 				latitude: item.sourceAsMap.lat,
				// 				longitude: item.sourceAsMap.lon,
				// 				iconPath:item.sourceAsMap.map,
				// 				value:item.sourceAsMap.name,
				// 				callout:{
				// 					content:item.sourceAsMap.name,
				// 					color:'#F76350',
				// 					fontSize:12
				// 				}
				// 			}
				// 			newmarker.push(marker)
				// 		})
				// 		this.markers = newmarker;
				// 		this.sid = id;
				// 	},
				// });
			},
			
			// 底部弹出层打开
			popupOpen() {
			  console.log('open');
			},
			// 底部弹出层关闭
			popupClose() {
			  this.popupShow = false;
			  console.log('close');
			},
			// 列表项点击事件
			itemClick(e){
				console.log('e',e);
				this.tapClick = e;
				console.log('this.tapClick',this.tapClick);
			}
		}
	}
</script>

<style>
	/* 顶部区域 */
	.header{
		background-color: #ffd102;
	}
	.search{
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 20rpx;
	}
	.place{
		color: #000;
	}
	
	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}
	.item {
		height: 100rpx;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	
	/* 地图 */
	.map{
		width: 100%; 
		height: 1200rpx;
	}
	/deep/ .search .u-border{
		border-color: #fff !important;
		border-width: 2rpx !important;
		height: 40rpx !important;
	}
	
	
	/* 底部弹窗 */
	.popup_content{
		text-align: center;
		padding-top: 20rpx;
	}
	.popup_content .list{
		margin-top: 30rpx;
	}
	.list_item{
		display: flex;
		align-items: flex-start;
		padding: 20rpx;
	}
	.list_item_left{
		color: #fff;
		background: #ff0000;
		border-radius: 100rpx;
		font-size: 26rpx;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.list_item_right{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		font-size: 30rpx;
		margin-left: 26rpx;
	}
	.list_item_right text{
		padding-bottom: 10rpx;
	}
	/* 选中状态 */
	.active{
		background: #0062cc!important;
	}
	.active_bac{
		background-color: #f0f0f0!important;
	}
</style>
